<template>
  <div class="login">
    <van-form @submit="onSubmit">
      <div class="title">
        <h1 style="text-align: center">寻知己</h1>
      </div>
      <van-cell-group inset style="">
        <van-field
            v-model="userAccount"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="userPassword"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 50px;">
        <van-button round plain block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
      <van-cell title="" to="/user/register" value="还没有账号？点击注册"
                style="margin: -40px -20px;"/>
    </van-form>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import myAxios from "../plugins/myAxios";
import {ResponseResult} from "../models/resopnse";
import {userType} from "../models/user";
import {showFailToast, showSuccessToast} from "vant";
import {useRoute,} from "vue-router";

// const router = useRouter()
const route = useRoute()

const userAccount = ref('');
const userPassword = ref('');
const onSubmit = async () => {
  const res: ResponseResult<userType> = await myAxios.post('user/login', {
    userAccount: userAccount.value,
    userPassword: userPassword.value
  })
  console.log(res, '用户登录')
  if (res.code === 0 && res.data) {
    showSuccessToast('登陆成功')
    window.location.href = route.query?.redirect as string ?? '/'
  } else {
    showFailToast('登录失败')
    userPassword.value = ''
  }
};

</script>


<style scoped>
.title {
  font-size: 35px;
  align-items: center;
  padding-top: 100px;
}

.login {
  min-width: 380px;
  min-height: 550px;
}
</style>
